<template>
  <div class="row q-pl-lg text-panda-text-light full-width justify-between" :class="bgclass">
    <div class="q-gutter-x-sm">
      <span class="line-height-30px text-panda-text-dark" style="    margin-left: 0px; ">数据来源</span>
      <q-checkbox
        class="line-height-30px"
        color="primary"
        v-model="queryform_form.dataSourceCode_all"
        label="全部"
        @input="queryform_form_dataSourceCode_all_change"
      />
      <q-checkbox
        class="line-height-30px"
        color="primary"
        v-model="queryform_form.dataSourceCode"
        v-for="(item,index) in filter_data_sources_constant"
        :label="item.fullName"
        :val="item.code"
        :key="`dataSource_${index}`"
        @input="queryform_form_dataSourceCode_change(item,index)"
      />
    </div>

    <div
      v-if="show_toggle"
      style="     margin-top: 8px;margin-right: 8px;"
      @click="toggle_showrightdetail"
    >
      <span class="panda_icon_switch panda-icon-mini">
        <q-tooltip :content-style="{ width: '90px' }">显示右侧信息</q-tooltip>
      </span>
      <!-- <span class="panda-right-info-toogle-button ">
          <q-tooltip :content-style="{ width: '90px' }" >显示右侧信息</q-tooltip>
        <span class="panda-right-info-toogle-button-inner"></span>
      </span>-->
    </div>
  </div>
</template>
<style lang="stylus" scoped></style>
<script>
import { mapActions, mapGetters } from "vuex";
import mixins from "src/mixins/index.js";
import rightinfomixin from "src/mixins/layout/rightinfo.js";
import datasourceCode from "src/mixins/constant/module/datasourceCode.js";
export default {
  mixins: [...mixins, rightinfomixin, datasourceCode],
  data() {
    return {
      queryform_form: {},
      queryform_module: {
        dataSourceCode: [],
        dataSourceCode_all: true
      }
    };
  },
  props: {
    show_toggle: false,
    bgclass: "bg-panda-dark-dark",
    not_pa: {
      default: 0
    }
  },
  mounted() {
    this.init_queryform_form_dataSourceCode();
  },
  created(){
 
  },
  computed: {
    filter_data_sources_constant() {
      if (this.not_pa !== 0) {
        return this.dataSource_obj.data_sources_constant_not_pa;
      } else {
        return this.dataSource_obj.data_sources_constant_commerce;
      }
    }
  },
  watch: {
    dataSource_obj: {
      handler(val) {
        this.init_queryform_form_dataSourceCode();
      },
      deep: true,
      immediate: true
    },
    "queryform_form.dataSourceCode"() {
      this.queryform_form_dataSourceCode_change();
      this.$emit("change", this.queryform_form);
    },
    "queryform_form.dataSourceCode_all"() {
      this.queryform_form_dataSourceCode_change();
      this.$emit("change", this.queryform_form);
    }
  },
  methods: {
    init_queryform_form_dataSourceCode() {

      let arr = [];
      if (this.filter_data_sources_constant) {

        this.filter_data_sources_constant.map(x => {
          arr.push(x.code);
        });

      }
      //  拿到
      this.queryform_form.dataSourceCode = arr;


    },
    comoute_showrightdetail_by_router() {},
    queryform_form_dataSourceCode_change() {
      this.set_router_cache_by_path_and_value(
        "queryform_form.dataSourceCode",
        this.queryform_form.dataSourceCode
      );
      this.set_router_cache_by_path_and_value(
        "queryform_form.dataSourceCode_all",
        this.queryform_form.dataSourceCode_all
      );
    },
    queryform_form_dataSourceCode_all_change(val) {
      if (this.queryform_form.dataSourceCode_all) {
        this.init_queryform_form_dataSourceCode();
      } else {
        this.queryform_form.dataSourceCode = [];
      }
    },
    queryform_form_dataSourceCode_change(item, index) {
      //   console.log(item, index);
      //   console.log(this.queryform_form.dataSourceCode);
      let al = this.filter_data_sources_constant.length;
      let sl = this.queryform_form.dataSourceCode.length;
      if (al != sl) {
        this.queryform_form.dataSourceCode_all = false;
      } else {
        this.queryform_form.dataSourceCode_all = true;
      }
    }
  }
};
</script>
